<template>
    <div id="app-body" :style="$store.state.isNav ? '' : 'width: 100vw'" @click="onAdd">
        <containerNav style="flex-shrink: 1;" v-if="$store.state.isNav" />
        <el-scrollbar class="container-box" :style="$store.state.isNav ? '' : 'min-width: 100vw;padding: 0'">
            <div style="">
                <container-header v-if="$store.state.isNav" />
                <router-view v-slot="{ Component }">
                    <keep-alive :include="$store.state.tagsPages.map(item => item.name)">
                        <component :is="Component" />
                    </keep-alive>
                </router-view>
            </div>
        </el-scrollbar>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import containerHeader from './components/container-header.vue'
import containerNav from './components/container-nav.vue'
import store from '@/store'
import user from '../src/utils/user'
export default defineComponent({
    name: 'Home',
    components: {
        containerHeader,
        containerNav
    },
    data() {
        return {
            isNav: false,
            theme: {
                _text: 'red'
            },
            $store: store
        }
    },
    async created() {
        await user.waitLogin()
        await store.commit('getLongPollingFile')
        console.log('获取环境', process.env.VUE_APP_BASE_URL)
    },
    methods: {
        onAdd() {
            store.commit('onModifyDownload')
        }
    }

    // created () {}
})
</script>
<!-- 当前页面样式 -->
<style lang="stylus">
@import './assets/iconfont/iconfont.css';
.yellow
    color #ed803a
.tc
    overflow auto
    width 100vw
    height 100vh
    position fixed
    top 0
    left 0
    background-color rgba(91, 91, 91,0.8)
    display flex
    align-items center
    justify-content center
.tctext
    margin-top 170px
.tcbox
    width 774px
    height 506px
.tccontent
    overflow hidden
    font-size 16px
    box-sizing border-box
    padding 0 40px
    width 100%
    height 456px
    background-image url(./assets/tc.png)
    background-repeat no-repeat
    background-size 100%
.top
    width 100%
    height 50px
    display flex
    align-items center
    justify-content space-between
.topclose
    width 20px
    height 20px
    text-align center
    border-radius 50%
    cursor pointer
    border 1px solid #ffffff
    color #ffffff
body
    margin 0 auto
    color color-black
    font-size font-base
    background-color #F7F8FC
#app
    height: 100vh
    overflow: hidden
    overflow-x: auto
#app-body
    display flex
    max-width 1920px
    min-width: 1260px
    margin 0 auto

.container-box
    width: calc(100% - 259px)
    height 100vh !important
    overflow auto
    box-sizing border-box
    padding 32px 24px
</style>
<!-- 全局样式 -->
<style lang="stylus">
.block
    background-color white
    padding: 15px
    border-radius 8px
    border 1px solid border-color
    margin-top 16px
    box-sizing border-box

.input
    width 255px
    height 38px
    background #FFFFFF
    border-radius 4px
    border 1px solid border-color
    padding-left 15px
    font-size 14px
    outline none
    &::-webkit-input-placeholder
        color color-grey

.btn
    width 105px
    height 44px
    background color-blue
    border-radius 4px
    border none
    color white
    cursor pointer
    .el-icon
        margin-right: 6px
.mini-btn
    @extend .btn
    width 74px
    height 32px
    background color-blue
    margin 30px auto
.btn-white
    @extend .btn
    background-color white
    color black
    border 1px solid border-color
.btn-green
    @extend .btn
    background-color color-green
    color white
    border 1px solid border-color
.btn-red
    @extend .btn
    background-color color-red
    color white
    border 1px solid border-color
.btn-white-blue
    @extend .btn
    background white
    border: 1px solid color-blue
    color color-blue
.btn-white-green
    @extend .btn
    background white
    border: 1px solid color-green
    color color-green

.important
    color color-red
    margin-right 4px

.row
    width 100%
    space-between()
    .key
        color color-grey
    .value
        color color-black
// 三角下拉图标
.triangle
    width 0
    height 0
    border 6px solid
    border-color black transparent transparent transparent
    display inline-block
    position relative
    vertical-align middle
    top 3px

    &.active
        top: -3px
        position relative
        border-color transparent transparent black transparent

.point
    cursor pointer

.link
    @extend .point
    color color-blue

.grey
    color color-grey
.align-items
    display flex
    align-items center
.justify-center
    justify-content center
.row-between
  display flex
  justify-content space-between
  align-items center

.row-around
  display flex
  justify-content space-around
  align-items center

.row-flex-one
    flex 1

.align-start
    display: flex;
    align-items: flex-start;
.flex-none
    flex none
// 隐藏
.opacity
    opacity 0
// 字体大小
.font-mini
    font-size font-mini
.font-base
    font-size font-base
.font-small
    font-size font-small
.font-normal
    font-size font-normal
.font-large
    font-size font-large
// 字体颜色
.color-black
    color color-black
.color-grey
    color color-grey
.color-grey2
    color color-grey2
.color-green
    color color-green
.color-red
    color color-red
.color-blue
    color color-blue
.color-yellow
    color color-yellow
.color-darkgrey
    color color-darkgrey
.color-lightgray
    color color-lightgray
// 字体加粗
.font-weight
    font-weight bold
</style>
